﻿/**
TODO: SessionID or RoomID
Pass the session id to server..
**/

define([
    "jQuery",
	"jQuery-ui",
    "drag", 
	"touchPunch",
	"finger", 
	"dragableTouch", 
	"html2Canvas",
	"canvas2Image", 
	"base64Img", 
	"printArea",
	], function (
    $,
	$ui,
    drag,
	touchPunch,
	finger, 
	dragableTouch, 
	html2Canvas,
	canvas2Image, 
	base64Img, 
	printArea
	) {
	
    return {
		fileId: "fileId",
		pageIdData : [],
		pages : new Array(),
		printObject:0,
		contentGlobal:false,
		lastIdx:[],
		baseUrl:document.getElementById("base_url").value,
		fileId:document.getElementById("file_id").value,
		pageId:document.getElementById("page_id").value,
		username:document.getElementById("u_name").value,

        init: function () {  
			App.pageIdPrint();  
			 
			$(function () {
				$('#select-print-button').click(
					function() {
						$('.tf').attr('checked', 'checked');
						 var sizeCheck = App.pageIdData.length;
						$('.DocView').css('display','block');
						for(var countData = 0; countData < sizeCheck; countData++){
							// $('<img></img>').attr({ id:"img_"+countData, class:"imagePreview", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[countData]+'.png'}).css({width:'100%'}).appendTo($('.DocView')); 
							// $('<img></img>').attr({ id:"img_"+countData, class:"imagePreview", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[countData]+'.png'}).css({width:'100%'}).appendTo($('.DocViewHide')); 
							var indexFind = countData + 1;
							App.lastIdx.push(indexFind);
							console.log(App.lastIdx);
							var rootContainer = $('<div></div>').attr({"id":"rootContainer-"+App.pageIdData[countData], class:"imagePreview page-break"}) ; 
							rootContainer.css('background-image', 'url(' + App.baseUrl+'documents/background-blank.png)');
							rootContainer.css('background-size', '100%');
							// $('.imagePreview').css('display','none');
							rootContainer.css('display','block');
							// $('.DocView').css('display','none');
							// $('.DocViewHide').css('display','block');
							// $('<img></img>').attr({id:"img_"+indexKe, class:"imagePreview", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[indexKe]+'.png'}).css({width:'100%'}).appendTo($('.DocView'));
							// $('<img></img>').attr({id:"img_"+indexKe, class:"imagePreview", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[indexKe]+'.png'}).css({width:'100%'}).appendTo($('.DocViewHide')); 
							
							// rootContainer.appendTo($('.DocView'));
							
							
							
							var objectData = " ";
							for(var objectIndex=0;objectIndex<App.contentGlobal.pages[countData].drawing_objects.length;objectIndex++)
							{  
								// rootContainer.width(App.contentGlobal.pages[countData].width);
								// rootContainer.height(App.contentGlobal.pages[countData].height);
								
								rootContainer.attr('width','100%');
								rootContainer.attr('height','100%');
								rootContainer.css('width','100%');
								rootContainer.css('height','100%');
								
								if((App.contentGlobal.pages[countData].drawing_objects[objectIndex]).type=="image"){  
									var newImgContainer = $('<div></div>').attr({'id':App.contentGlobal.pages[countData].drawing_objects[objectIndex].id,'class':'image', 'type':App.contentGlobal.pages[countData].drawing_objects[objectIndex].type, 'object_type':App.contentGlobal.pages[countData].drawing_objects[objectIndex].type, 'created_by':App.contentGlobal.pages[countData].drawing_objects[objectIndex].created_by, 'created_date':App.contentGlobal.pages[countData].drawing_objects[objectIndex].created_date}); 
									newImgContainer.css("position","absolute");
									newImgContainer.css("left",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posx)));
									newImgContainer.css("top",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posy)));
									newImgContainer.css("height",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].height));
									newImgContainer.css("width",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].width));
									newImgContainer.css("overflow","visible");
								
									var newImgComponent = $('<img></img>').attr({ 'src': App.baseUrl+App.contentGlobal.pages[countData].drawing_objects[objectIndex].image_url,'id':"img"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id}).appendTo(newImgContainer);
									newImgComponent.attr({ 'src': App.baseUrl+App.contentGlobal.pages[countData].drawing_objects[objectIndex].image_url,'id':"img"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id}); 
									
									newImgContainer.appendTo(rootContainer);
								}
								if((App.contentGlobal.pages[countData].drawing_objects[objectIndex]).type=="attach"){ 
									var newImgContainer = $('<div></div>').attr({'id':App.contentGlobal.pages[countData].drawing_objects[objectIndex].id,'class':'image', 'type':App.contentGlobal.pages[countData].drawing_objects[objectIndex].type, 'object_type':App.contentGlobal.pages[countData].drawing_objects[objectIndex].type, 'created_by':App.contentGlobal.pages[countData].drawing_objects[objectIndex].created_by, 'created_date':App.contentGlobal.pages[countData].drawing_objects[objectIndex].created_date}); 
									newImgContainer.css("position","absolute");
									newImgContainer.css("left",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posx)));
									newImgContainer.css("top",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posy)));
									newImgContainer.css("height",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].height));
									newImgContainer.css("width",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].width));
									newImgContainer.css("overflow","visible");
								
									var newImgComponent = $('<img></img>').attr({ 'src': App.baseUrl+App.contentGlobal.pages[countData].drawing_objects[objectIndex].image_url,'id':"img"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id}).appendTo(newImgContainer);
									newImgComponent.attr({ 'src': App.baseUrl+App.contentGlobal.pages[countData].drawing_objects[objectIndex].image_url,'id':"img"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id}); 
									
									newImgContainer.appendTo(rootContainer);
								}
								if((App.contentGlobal.pages[countData].drawing_objects[objectIndex]).type=="text" || 
									(App.contentGlobal.pages[countData].drawing_objects[objectIndex]).type=="buble"){   
									var style = ""; 
									if(App.contentGlobal.pages[countData].drawing_objects[objectIndex].object_type == "buble"){
										if(App.contentGlobal.pages[countData].drawing_objects[objectIndex].kind){
											if(App.contentGlobal.pages[countData].drawing_objects[objectIndex].kind == "bubble1"){
												style = 'class="triangle-border"';
											}else if(App.contentGlobal.pages[countData].drawing_objects[objectIndex].kind == "bubble2"){
												style = 'class="rectangle-speech-border"';
											}else if(App.contentGlobal.pages[countData].drawing_objects[objectIndex].kind == "bubble3"){
												style = 'class="oval-speech-border"';
											}else if(App.contentGlobal.pages[countData].drawing_objects[objectIndex].kind == "bubble4"){
												style = 'class="oval-thought-border"';
											}else if(App.contentGlobal.pages[countData].drawing_objects[objectIndex].kind == "bubble5"){
												style = 'class="square-line-border"';
											}else{
												style = 'class="triangle-border"';
											}
										}else{
											style = 'class="triangle-border"';
										}
									}
									var newTextObject =  $('<div ' + style + '></div>')
															.attr("id",App.contentGlobal.pages[countData].drawing_objects[objectIndex].id)
															.attr("object_type",App.contentGlobal.pages[countData].drawing_objects[objectIndex].object_type)
															.addClass("nic-edit-element")
															.css("overflow","visible")
															.css("z-index","18"); 
									if(App.contentGlobal.pages[countData].drawing_objects[objectIndex].object_type == "buble")
									{
										newTextObject.attr("kind",App.contentGlobal.pages[countData].drawing_objects[objectIndex].kind);
									} 
									newTextObject.css("left",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posx)));
									newTextObject.css("top",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posy)));
									newTextObject.css("height",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].height));
									newTextObject.css("width",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].width));
									newTextObject.css("overflow","visible");
									
									newTextObject.html("<div id='text_content_"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id+"' style='overflow:hidden;width:100%;height:100%;'>" + App.contentGlobal.pages[countData].drawing_objects[objectIndex].content + "</div>");
									$("#"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id).css("position", "");
									
									newTextObject.appendTo(rootContainer);
								}
								if((App.contentGlobal.pages[countData].drawing_objects[objectIndex]).type=="chart"){ 
									// App.loadChartObject(App.contentGlobal.pages[countData].drawing_objects[objectIndex]).appendTo(rootContainer);;
									var newChartContainer = $('<div></div>').attr({'id':App.contentGlobal.pages[countData].drawing_objects[objectIndex].id,'class':'image','type':App.contentGlobal.pages[countData].drawing_objects[objectIndex].type, 'object_type':App.contentGlobal.pages[countData].drawing_objects[objectIndex].object_type, 'chart-data':App.contentGlobal.pages[countData].drawing_objects[objectIndex].data_chart});//.appendTo($('#rootPrintContainer')); 
									newChartContainer.css("position","absolute");
									newChartContainer.css("left",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posx)));
									newChartContainer.css("top",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posy)));
									newChartContainer.css("height",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].height));
									newChartContainer.css("width",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].width));
									newChartContainer.css("overflow","visible");
									var newChartImgContainer = $('<img></img>').attr({ 'src': App.baseUrl+App.contentGlobal.pages[countData].drawing_objects[objectIndex].image_url,'id':"img"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id}).appendTo(newChartContainer);
									
									newChartContainer.appendTo(rootContainer);
								}
								if((App.contentGlobal.pages[countData].drawing_objects[objectIndex]).type=="sticky-text"){ 
									var newStickyTextObject =  $('<div></div>')
									.attr("id",App.contentGlobal.pages[countData].drawing_objects[objectIndex].id)
									.attr("object_type",App.contentGlobal.pages[countData].drawing_objects[objectIndex].object_type)
									.addClass("nic-sticky-edit-element");//.appendTo($('#rootPrintContainer'));
 
									newStickyTextObject.css("left",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posx)));
									newStickyTextObject.css("top",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posy)));
									newStickyTextObject.css("height",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].height));
									newStickyTextObject.css("width",parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].width));
									newStickyTextObject.css("background",App.contentGlobal.pages[countData].drawing_objects[objectIndex].background);
									newStickyTextObject.css("overflow","visible");
									newStickyTextObject.html("<div id='text_content_"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id+"' style='overflow:hidden;width:100%;height:100%;'>" + App.contentGlobal.pages[countData].drawing_objects[objectIndex].content + "</div>");
									$("#"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id).css("position", "");
									newStickyTextObject.appendTo(rootContainer);
								}
								if((App.contentGlobal.pages[countData].drawing_objects[objectIndex]).type=="table"){ 
									var newTableContainer = $('<div></div>').attr({'id':App.contentGlobal.pages[countData].drawing_objects[objectIndex].id,'class':'table','type':App.contentGlobal.pages[countData].drawing_objects[objectIndex].type, 'object_type':App.contentGlobal.pages[countData].drawing_objects[objectIndex].object_type});//.appendTo($('#rootPrintContainer'));
 
									newTableContainer.css("position","absolute");
									newTableContainer.css("left",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posx)));
									newTableContainer.css("top",(parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].posy)));
									newTableContainer.css("height", (parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].height)));
									newTableContainer.css("width", (parseInt(App.contentGlobal.pages[countData].drawing_objects[objectIndex].width)));
									newTableContainer.css("overflow","visible");
									
									newTableContainer.css("cursor", 'default');
									newTableContainer.css("border", '1px solid rgb(160, 160, 164)'); 
									
									var tableConteiner = $('<table></table>').attr({ id: "tbl_"+App.contentGlobal.pages[countData].drawing_objects[objectIndex].id, border:"2px", width:"100%", height:"100%"}).html(contentObject.pages[countData].drawing_objects[objectIndex].content_table).appendTo(newTableContainer);
									
									newTableContainer.appendTo(rootContainer);
								}  
							}
							rootContainer.appendTo($('.DocViewHide'));
							var cloneObject = rootContainer.clone();
							$('.DocView').children().remove();
							cloneObject.appendTo($('.DocView'));
							$('.DocView').css('display','block');
						}
					} 
				);
			});	
			$(function () {
				$('#des-print-button').click(function () {
					$('.tf').removeAttr('checked');
					$('.DocView').find($('.imagePreview')).remove();
					$('.DocViewHide').find($('.imagePreview')).remove();
				});
			});
			$(function () {
				$('#print-button').click(function () { 
					$('.DocViewHide').printArea();
				});
			});	
			$(function () {
				$('#cancel-button').click(function () { 
					window.close();
				});
			});	
			
			 
			 
			                    
		},
		 
		
		 
		
		loadTextObject:function(data){
			
			var style = ""; 
			var color = "";
			if(data.object_type == "buble"){
				
				//rheo,bubble ganti stick
				style = 'class="sticky taped"';
				color = '#F4F39E';
				if(data.kind){
					if(data.kind == "bubble2"){
						color = '#d6f0fa';
					}else if(data.kind == "bubble3"){
						color = '#f5d1f5';
					}else if(data.kind == "bubble4"){
						color = '#cffdc9';
					}else if(data.kind == "bubble5"){
						color = '#d5cdfe';
					}
				}
			}
			var newTextObject =  $('<div ' + style + '></div>')
									.attr("id",data.id)
									.attr("object_type",data.object_type)
									.addClass("nic-edit-element")//.appendTo($('#rootPrintContainer'))
									.css("overflow","visible")
									.css("z-index","18"); 
									
			if(data.object_type == "buble")
			{
				newTextObject.attr("kind",data.kind);
				newTextObject.css("background-color",color);
			}
			newTextObject.css("left",(parseInt(data.posx)));
			newTextObject.css("top",(parseInt(data.posy)));
			newTextObject.css("height",parseInt(data.height));
			newTextObject.css("width",parseInt(data.width));
			newTextObject.css("overflow","visible");
			
			newTextObject.html("<div id='text_content_"+data.id+"' style='overflow:hidden;width:100%;height:100%;'>" + data.content + "</div>");
			$("#"+data.id).css("position", "");
			 
			if(App.printObject == 0){ 
				newTextObject.appendTo($('#rootPrintContainer'));
			}else{ 
				return newTextObject;
			}
		},
		
	
		loadStickyTextObject:function(data){ 
			var newStickyTextObject =  $('<div></div>')
									.attr("id",data.id)
									.attr("object_type",data.object_type)
									.addClass("nic-sticky-edit-element");//.appendTo($('#rootPrintContainer'));
 
			newStickyTextObject.css("left",(parseInt(data.posx)));
			newStickyTextObject.css("top",(parseInt(data.posy)));
			newStickyTextObject.css("height",parseInt(data.height));
			newStickyTextObject.css("width",parseInt(data.width));
			newStickyTextObject.css("background",data.background);
			newStickyTextObject.css("overflow","visible");
			newStickyTextObject.html("<div id='text_content_"+data.id+"' style='overflow:hidden;width:100%;height:100%;'>" + data.content + "</div>");
			$("#"+data.id).css("position", "");
			
			if(App.printObject == 0){
				newStickyTextObject.appendTo($('#rootPrintContainer'));
			}else{
				return newStickyTextObject;
			}
			  
		},
		
		
		loadDrawingObject : function(data){   
			var newImgContainer = $('<div></div>').attr({'id':data.id,'class':'image', 'type':data.type, 'object_type':data.type, 'created_by':data.created_by, 'created_date':data.created_date});//.appendTo($('#rootPrintContainer')); 
			newImgContainer.css("position","absolute");
			newImgContainer.css("left",(parseInt(data.posx)));
			newImgContainer.css("top",(parseInt(data.posy)));
			newImgContainer.css("height",parseInt(data.height));
			newImgContainer.css("width",parseInt(data.width));
			newImgContainer.css("overflow","visible");
		
			var newImgComponent = $('<img></img>').attr({ 'src': App.baseUrl+data.image_url,'id':"img"+data.id}).appendTo(newImgContainer);
			newImgComponent.attr({ 'src': App.baseUrl+data.image_url,'id':"img"+data.id}); 
			 
			if(App.printObject == 0){
				newImgContainer.appendTo($('#rootPrintContainer'));
			}else{
				// alert(newImgContainer);
				console.log(newImgContainer);
				return newImgContainer;
			}
		},
		
		
		
		loadTableObject:function(data){ 
			var newTableContainer = $('<div></div>').attr({'id':data.id,'class':'table','type':data.type, 'object_type':data.object_type});//.appendTo($('#rootPrintContainer'));
 
			newTableContainer.css("position","absolute");
			newTableContainer.css("left",(parseInt(data.posx)));
			newTableContainer.css("top",(parseInt(data.posy)));
			newTableContainer.css("height", (parseInt(data.height)));
			newTableContainer.css("width", (parseInt(data.width)));
			newTableContainer.css("overflow","visible");
			
			newTableContainer.css("cursor", 'default');
			newTableContainer.css("border", '1px solid rgb(160, 160, 164)'); 
			
			var tableConteiner = $('<table></table>').attr({ id: "tbl_"+data.id, border:"2px", width:"100%", height:"100%"}).html(data.content_table).appendTo(newTableContainer);
			
			if(App.printObject == 0){
				newTableContainer.appendTo($('#rootPrintContainer'));
			}else{
				return newTableContainer;
			} 
		},
		
		
		
		loadChartObject : function(data){ 
			var newChartContainer = $('<div></div>').attr({'id':data.id,'class':'image','type':data.type, 'object_type':data.object_type, 'chart-data':data.data_chart});//.appendTo($('#rootPrintContainer')); 
			newChartContainer.css("position","absolute");
			newChartContainer.css("left",(parseInt(data.posx)));
			newChartContainer.css("top",(parseInt(data.posy)));
			newChartContainer.css("height",parseInt(data.height));
			newChartContainer.css("width",parseInt(data.width));
			newChartContainer.css("overflow","visible");
			var newChartImgContainer = $('<img></img>').attr({ 'src': App.baseUrl+data.image_url,'id':"img"+data.id}).appendTo(newChartContainer);
			
			if(App.printObject == 0){
				newChartContainer.appendTo($('#rootPrintContainer'));
			}else{
				return newChartContainer;
			}  
		},
		
	
		
		
		htmlToImage:function(currPageId){ 
			html2canvas(document.getElementById('rootContainer'), {
				onrendered: function(canvas) { 
					var dataImg = Canvas2Image.convertToPNG(canvas, 80, 60);
					var dataURL = dataImg.src; 
					var newImagePath = "documents/"+App.fileId+"/thumb-"+currPageId+".png";
					
					var url = App.baseUrl+"CommHub/add_thumb_canvas";
					var allData = {"file_id": App.fileId,
									"page_id": currPageId,
									"filepath" : newImagePath,
									"image_data": dataURL
								};
					var request = $.ajax({ //get data awal
									url: url,
									type: "POST",
									data: allData,
								});
					
					request.done(function(msg) {   
						var existingObject=false;	//check if it's an existing object
							$('.layerboxContainer').children().each(function(){
								if($(this).attr('id') == "page_"+currPageId)
								{
									existingObject=$(this);
								}
							});
							if(existingObject)
							{ 
								 $("#page"+currPageId).attr('src',(App.baseUrl+newImagePath+"?dum="+(new Date).getTime())); 
							}
							// setTimeout("App.htmlToImage(App.pageId)", 2000);
					});
					request.fail(function(jqXHR, textStatus) { 
					});
					request.always(function(){
					});
				}
			});
			// var urlImage = "documents/"+App.fileId+"/thumb-"+App.pageId+".png";
		},
				
		   
		
		printWorkspaces:function(){
			var my_window = false;
			my_window = window.open(App.baseUrl+"home/draw_preview?f_id="+App.fileId, "DigitalBoard", "status=1,width=250,height=160");
			
		},
		
		pageIdPrint:function(){
		
			
			var url = App.baseUrl+"CommHub/get_file_data";
			var allData = {"file_id": App.fileId}
			
			var request = $.ajax({ //get data awal
				url: url,
				type: "POST",
				data: allData,
			});
			request.done(function(msg) { 
				var jsonObject = JSON.parse(msg); 
				var contentObject = JSON.parse(jsonObject.content);  
				App.contentGlobal = JSON.parse(jsonObject.content);
				var objectArray=[];
				var printPage = 0;
				App.htmlToImagePrintRecurse(contentObject,0); 
				
				// $('#rootPrintContainer').hide();
				// $('#DoView').hide();
				
				
			});
			request.fail(function(jqXHR, textStatus) {
			});
			request.always(function(){
			});
		},
		htmlToImagePrintRecurse:function(contentObject,pageIndex){
				// alert(pageIndex);
				// alert(contentObject.pages.length);
				if(pageIndex >= contentObject.pages.length) 
				// if(pageIndex >= 1) 
				{
					// alert("eksekeusi");
					$("#overlay").hide();
					App.loadDataPrintTable(contentObject);
					return;
				}
				
				indexKe = pageIndex + 1;
				App.pageIdData.push(indexKe);
				$('#rootPrintContainer').children().remove();
				for(var objectIndex=0;objectIndex<contentObject.pages[pageIndex].drawing_objects.length;objectIndex++)
				{  
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="image"){ 
						App.loadDrawingObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="attach"){
						App.loadDrawingObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="text" || 
						(contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="buble"){  
						App.loadTextObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="chart"){ 
						App.loadChartObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="sticky-text"){
						App.loadStickyTextObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					}
					if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="table"){
						App.loadTableObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
					} 
				}   
				
				html2canvas(document.getElementById('rootPrintContainer'), { 
					onrendered: function(canvas) {  
						var dataImg = Canvas2Image.convertToPNG(canvas, 940, 640);
						var dataURL = dataImg.src; 
						var indexPage = pageIndex + 1;
						var newImagePath = "documents/"+App.fileId+"/print-"+indexPage+".png";
						// alert(newImagePath);
						var url = App.baseUrl+"CommHub/add_thumb_canvas";
						var allData = {"file_id": App.fileId,
										"page_id": pageIndex,
										"filepath" : newImagePath,
										"image_data": dataURL
									};
						var request = $.ajax({ //get data awal
										url: url,
										type: "POST",
										data: allData,
									});
						
						request.done(function(msg) {  
							// alert("Tes");
							var existingObject=false;	//check if it's an existing object 
							pageIndex+=1;
							App.htmlToImagePrintRecurse(contentObject,pageIndex);
						});
						request.fail(function(jqXHR, textStatus) {  
						});
						request.always(function(){
						});
					}
				});
		
		},
		
		loadDataPrintTable:function(contentObject){ 
		
			$('#rootPrintContainer').hide();
			var sizeData = App.pageIdData.length;
			// alert(sizeData);
			// var lastIdx = [];
			var trSize = 1;
			var dataKe = 1;
			var tr = [];
			App.printObject = 1;
			var row = $('<tr></tr>').attr({ id: 'pageList'+trSize+'_trID' }).appendTo($('#pageList'));
			for (var i = 0; i < sizeData; i++) {
				console.log(i);
				if( trSize > 5){ 
					trSize = 1;
					var row = $('<tr></tr>').attr({ id: 'pageList'+trSize+'_trID' }).appendTo($('#pageList'));
				} 
				var column = $('<td style="text-align:center"></td>').appendTo(row);  
				$('<img></img>').attr({ src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[i]+'.png'}).css({height:'80px'}).appendTo(column);  
				var checkbutton = $('<input></input>').attr({type:'checkbox', id:'checkbox_'+i, class:'tf'}).css({height:'80px'}).appendTo(column); 
				
				checkbutton.on('tap',function(e){ 
				if( !(navigator.userAgent.match(/Android/i)
					|| navigator.userAgent.match(/webOS/i)
					|| navigator.userAgent.match(/iPhone/i)
					|| navigator.userAgent.match(/iPad/i)
					|| navigator.userAgent.match(/iPod/i)
					|| navigator.userAgent.match(/BlackBerry/i)
					|| navigator.userAgent.match(/Windows Phone/i)
				  ))
				{ 
					var indexKe = parseInt($(this).attr("id").substring(9)); 
					 
					if(!$(this).is(":checked")) { 
						var indexFind = indexKe + 1;
						App.lastIdx.push(indexFind);
						console.log(App.lastIdx);
						var rootContainer = $('<div></div>').attr({"id":"rootContainer-"+App.pageIdData[indexKe], class:"imagePreview page-break"}) ; 
						rootContainer.css('background-image', 'url(' + App.baseUrl+'documents/background-blank.png)');
						rootContainer.css('background-size', '100%');
						// alert(indexFind);
						// alert($('.DocView').find($('#rootContainer-'+indexFind)).attr('id'));
						// alert("rootContainer-"+App.pageIdData[indexKe]);
						if($('.DocViewHide').find($('#rootContainer-'+indexFind)).attr('id') != "rootContainer-"+App.pageIdData[indexKe])
						{	 
							// $('.imagePreview').css('display','none');
							rootContainer.css('display','block');
							// $('.DocView').css('display','none');
							// $('.DocViewHide').css('display','block');
							// $('<img></img>').attr({id:"img_"+indexKe, class:"imagePreview", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[indexKe]+'.png'}).css({width:'100%'}).appendTo($('.DocView'));
							// $('<img></img>').attr({id:"img_"+indexKe, class:"imagePreview", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[indexKe]+'.png'}).css({width:'100%'}).appendTo($('.DocViewHide')); 
							
							// rootContainer.appendTo($('.DocView'));
							rootContainer.appendTo($('.DocViewHide'));
							
							
							
							var objectData = " ";
							for(var objectIndex=0;objectIndex<contentObject.pages[indexKe].drawing_objects.length;objectIndex++)
							{  
								// rootContainer.width(contentObject.pages[indexKe].width);
								// rootContainer.height(contentObject.pages[indexKe].height);
								
								rootContainer.attr('width','100%');
								rootContainer.attr('height','100%');
								rootContainer.css('width','100%');
								rootContainer.css('height','100%');
								
								// rootContainer.css('width',contentObject.pages[indexKe].width);
								// rootContainer.css('height',contentObject.pages[indexKe].height); 
								// alert((contentObject.pages[indexKe].drawing_objects[objectIndex]).type);
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="image"){  
									var newImgContainer = $('<div></div>').attr({'id':contentObject.pages[indexKe].drawing_objects[objectIndex].id,'class':'image', 'type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'object_type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'created_by':contentObject.pages[indexKe].drawing_objects[objectIndex].created_by, 'created_date':contentObject.pages[indexKe].drawing_objects[objectIndex].created_date}); 
									newImgContainer.css("position","absolute");
									newImgContainer.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newImgContainer.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newImgContainer.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newImgContainer.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newImgContainer.css("overflow","visible");
								
									var newImgComponent = $('<img></img>').attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}).appendTo(newImgContainer);
									newImgComponent.attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}); 
									
									newImgContainer.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="attach"){ 
									var newImgContainer = $('<div></div>').attr({'id':contentObject.pages[indexKe].drawing_objects[objectIndex].id,'class':'image', 'type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'object_type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'created_by':contentObject.pages[indexKe].drawing_objects[objectIndex].created_by, 'created_date':contentObject.pages[indexKe].drawing_objects[objectIndex].created_date}); 
									newImgContainer.css("position","absolute");
									newImgContainer.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newImgContainer.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newImgContainer.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newImgContainer.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newImgContainer.css("overflow","visible");
								
									var newImgComponent = $('<img></img>').attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}).appendTo(newImgContainer);
									newImgComponent.attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}); 
									
									newImgContainer.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="text" || 
									(contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="buble"){   
									var style = ""; 
									if(contentObject.pages[indexKe].drawing_objects[objectIndex].object_type == "buble"){
										if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind){
											if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble1"){
												style = 'class="triangle-border"';
											}else if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble2"){
												style = 'class="rectangle-speech-border"';
											}else if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble3"){
												style = 'class="oval-speech-border"';
											}else if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble4"){
												style = 'class="oval-thought-border"';
											}else if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble5"){
												style = 'class="square-line-border"';
											}else{
												style = 'class="triangle-border"';
											}
										}else{
											style = 'class="triangle-border"';
										}
									}
									var newTextObject =  $('<div ' + style + '></div>')
															.attr("id",contentObject.pages[indexKe].drawing_objects[objectIndex].id)
															.attr("object_type",contentObject.pages[indexKe].drawing_objects[objectIndex].object_type)
															.addClass("nic-edit-element")
															.css("overflow","visible")
															.css("z-index","18"); 
									if(contentObject.pages[indexKe].drawing_objects[objectIndex].object_type == "buble")
									{
										newTextObject.attr("kind",contentObject.pages[indexKe].drawing_objects[objectIndex].kind);
									} 
									newTextObject.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newTextObject.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newTextObject.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newTextObject.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newTextObject.css("overflow","visible");
									
									newTextObject.html("<div id='text_content_"+contentObject.pages[indexKe].drawing_objects[objectIndex].id+"' style='overflow:hidden;width:100%;height:100%;'>" + contentObject.pages[indexKe].drawing_objects[objectIndex].content + "</div>");
									$("#"+contentObject.pages[indexKe].drawing_objects[objectIndex].id).css("position", "");
									
									newTextObject.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="chart"){ 
									// App.loadChartObject(contentObject.pages[indexKe].drawing_objects[objectIndex]).appendTo(rootContainer);;
									var newChartContainer = $('<div></div>').attr({'id':contentObject.pages[indexKe].drawing_objects[objectIndex].id,'class':'image','type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'object_type':contentObject.pages[indexKe].drawing_objects[objectIndex].object_type, 'chart-data':contentObject.pages[indexKe].drawing_objects[objectIndex].data_chart});//.appendTo($('#rootPrintContainer')); 
									newChartContainer.css("position","absolute");
									newChartContainer.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newChartContainer.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newChartContainer.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newChartContainer.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newChartContainer.css("overflow","visible");
									var newChartImgContainer = $('<img></img>').attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}).appendTo(newChartContainer);
									
									newChartContainer.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="sticky-text"){ 
									var newStickyTextObject =  $('<div></div>')
									.attr("id",contentObject.pages[indexKe].drawing_objects[objectIndex].id)
									.attr("object_type",contentObject.pages[indexKe].drawing_objects[objectIndex].object_type)
									.addClass("nic-sticky-edit-element");//.appendTo($('#rootPrintContainer'));
 
									newStickyTextObject.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newStickyTextObject.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newStickyTextObject.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newStickyTextObject.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newStickyTextObject.css("background",contentObject.pages[indexKe].drawing_objects[objectIndex].background);
									newStickyTextObject.css("overflow","visible");
									newStickyTextObject.html("<div id='text_content_"+contentObject.pages[indexKe].drawing_objects[objectIndex].id+"' style='overflow:hidden;width:100%;height:100%;'>" + contentObject.pages[indexKe].drawing_objects[objectIndex].content + "</div>");
									$("#"+contentObject.pages[indexKe].drawing_objects[objectIndex].id).css("position", "");
									newStickyTextObject.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="table"){ 
									var newTableContainer = $('<div></div>').attr({'id':contentObject.pages[indexKe].drawing_objects[objectIndex].id,'class':'table','type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'object_type':contentObject.pages[indexKe].drawing_objects[objectIndex].object_type});//.appendTo($('#rootPrintContainer'));
 
									newTableContainer.css("position","absolute");
									newTableContainer.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newTableContainer.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newTableContainer.css("height", (parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height)));
									newTableContainer.css("width", (parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width)));
									newTableContainer.css("overflow","visible");
									
									newTableContainer.css("cursor", 'default');
									newTableContainer.css("border", '1px solid rgb(160, 160, 164)'); 
									
									var tableConteiner = $('<table></table>').attr({ id: "tbl_"+contentObject.pages[indexKe].drawing_objects[objectIndex].id, border:"2px", width:"100%", height:"100%"}).html(contentObject.pages[indexKe].drawing_objects[objectIndex].content_table).appendTo(newTableContainer);
									
									newTableContainer.appendTo(rootContainer);
								} 
							} 
							var cloneObject = rootContainer.clone();
							$('.DocView').children().remove();
							cloneObject.appendTo($('.DocView'));
							$('.DocView').css('display','block');
						}else{
							var cloneObject = $('.DocViewHide').find($('#rootContainer-'+indexFind)).clone();
							cloneObject.css('display','block');
							$('.DocView').children().remove();
							cloneObject.appendTo($('.DocView'));
							$('.DocView').css('display','block');
						}						
						
					}else{  
						// $('.DocView').find($('#img_'+indexKe)).remove();
						// $('.DocViewHide').find($('#img_'+indexKe)).remove();
						 
						var indexTo = 0;
						indexTo = indexKe + 1;
						var viewIndx = i - 2;   
						
						var alreadyIndex = false;
						var checkIdx = -1;
						for(var indexLast = 0;App.lastIdx.length;indexLast++){
							if(App.lastIdx[indexLast] == indexTo){
								checkIdx = indexLast;
								alreadyIndex = true;
								break;
							}
						}
						
						if(alreadyIndex){  
							var deleteObjIdx = App.lastIdx[checkIdx];
							$('.DocViewHide').find($('#rootContainer-'+deleteObjIdx)).remove();
							$('.DocViewHide').find($('#rootContainer-'+indexTo)).remove();
							$('.DocView').find($('#rootContainer-'+App.lastIdx[checkIdx])).remove();
							App.lastIdx.splice(checkIdx,1);
							console.log(App.lastIdx);							
							$('.DocViewHide').find($('#rootContainer-'+indexTo)).css("display","none"); 
							$('.DocViewHide').find($('#rootContainer-'+deleteObjIdx)).remove();
							// $('.DocView').find($('#rootContainer-'+App.lastIdx[checkIdx])).css("display","block"); 
							// $('.imagePreview').css("display","none"); 
							var cloneViewObject = $('.DocViewHide').find($('#rootContainer-'+App.lastIdx[App.lastIdx.length-1])).clone();
							$('.DocViewHide').find($('#rootContainer-'+App.lastIdx[App.lastIdx.length-1])).css("display","block");
							cloneViewObject.appendTo($('.DocView'));
						} 
					}
					App.printObject = 0;
				}
				else
				{
					var indexKe = parseInt($(this).attr("id").substring(9)); 
					 
					if(!$(this).is(":checked")) { 
						var indexFind = indexKe + 1;
						App.lastIdx.push(indexFind);
						console.log(App.lastIdx);
						var rootContainer = $('<div></div>').attr({"id":"rootContainer-"+App.pageIdData[indexKe], class:"imagePreview"}) ; 
						
						if($('.DocViewHide').find($('#rootContainer-'+indexFind)).attr('id') != "rootContainer-"+App.pageIdData[indexKe])
						{	 
							$('.imagePreview').css('display','none');
							rootContainer.css('display','block');
							$('.DocView').css('display','none');
							$('.DocViewHide').css('display','block');
							// $('<img></img>').attr({id:"img_"+indexKe, class:"imagePreview", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[indexKe]+'.png'}).css({width:'100%'}).appendTo($('.DocView'));
							// $('<img></img>').attr({id:"img_"+indexKe, class:"imagePreview", src: App.baseUrl+'documents/'+App.fileId+'/print-'+App.pageIdData[indexKe]+'.png'}).css({width:'100%'}).appendTo($('.DocViewHide')); 
							
							rootContainer.appendTo($('.DocView'));
							rootContainer.appendTo($('.DocViewHide'));
							
							var objectData = " ";
							for(var objectIndex=0;objectIndex<contentObject.pages[indexKe].drawing_objects.length;objectIndex++)
							{  
								rootContainer.width(contentObject.pages[indexKe].width);
								rootContainer.height(contentObject.pages[indexKe].height);
								
								rootContainer.css('width',contentObject.pages[indexKe].width);
								rootContainer.css('height',contentObject.pages[indexKe].height); 
								// alert((contentObject.pages[indexKe].drawing_objects[objectIndex]).type);
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="image"){  
									var newImgContainer = $('<div></div>').attr({'id':contentObject.pages[indexKe].drawing_objects[objectIndex].id,'class':'image', 'type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'object_type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'created_by':contentObject.pages[indexKe].drawing_objects[objectIndex].created_by, 'created_date':contentObject.pages[indexKe].drawing_objects[objectIndex].created_date}); 
									newImgContainer.css("position","absolute");
									newImgContainer.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newImgContainer.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newImgContainer.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newImgContainer.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newImgContainer.css("overflow","visible");
								
									var newImgComponent = $('<img></img>').attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}).appendTo(newImgContainer);
									newImgComponent.attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}); 
									
									newImgContainer.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="attach"){ 
									var newImgContainer = $('<div></div>').attr({'id':contentObject.pages[indexKe].drawing_objects[objectIndex].id,'class':'image', 'type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'object_type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'created_by':contentObject.pages[indexKe].drawing_objects[objectIndex].created_by, 'created_date':contentObject.pages[indexKe].drawing_objects[objectIndex].created_date}); 
									newImgContainer.css("position","absolute");
									newImgContainer.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newImgContainer.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newImgContainer.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newImgContainer.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newImgContainer.css("overflow","visible");
								
									var newImgComponent = $('<img></img>').attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}).appendTo(newImgContainer);
									newImgComponent.attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}); 
									
									newImgContainer.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="text" || 
									(contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="buble"){   
									var style = ""; 
									if(contentObject.pages[indexKe].drawing_objects[objectIndex].object_type == "buble"){
										if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind){
											if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble1"){
												style = 'class="triangle-border"';
											}else if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble2"){
												style = 'class="rectangle-speech-border"';
											}else if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble3"){
												style = 'class="oval-speech-border"';
											}else if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble4"){
												style = 'class="oval-thought-border"';
											}else if(contentObject.pages[indexKe].drawing_objects[objectIndex].kind == "bubble5"){
												style = 'class="square-line-border"';
											}else{
												style = 'class="triangle-border"';
											}
										}else{
											style = 'class="triangle-border"';
										}
									}
									var newTextObject =  $('<div ' + style + '></div>')
															.attr("id",contentObject.pages[indexKe].drawing_objects[objectIndex].id)
															.attr("object_type",contentObject.pages[indexKe].drawing_objects[objectIndex].object_type)
															.addClass("nic-edit-element")
															.css("overflow","visible")
															.css("z-index","18"); 
									if(contentObject.pages[indexKe].drawing_objects[objectIndex].object_type == "buble")
									{
										newTextObject.attr("kind",contentObject.pages[indexKe].drawing_objects[objectIndex].kind);
									} 
									newTextObject.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newTextObject.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newTextObject.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newTextObject.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newTextObject.css("overflow","visible");
									
									newTextObject.html("<div id='text_content_"+contentObject.pages[indexKe].drawing_objects[objectIndex].id+"' style='overflow:hidden;width:100%;height:100%;'>" + contentObject.pages[indexKe].drawing_objects[objectIndex].content + "</div>");
									$("#"+contentObject.pages[indexKe].drawing_objects[objectIndex].id).css("position", "");
									
									newTextObject.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="chart"){ 
									// App.loadChartObject(contentObject.pages[indexKe].drawing_objects[objectIndex]).appendTo(rootContainer);;
									var newChartContainer = $('<div></div>').attr({'id':contentObject.pages[indexKe].drawing_objects[objectIndex].id,'class':'image','type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'object_type':contentObject.pages[indexKe].drawing_objects[objectIndex].object_type, 'chart-data':contentObject.pages[indexKe].drawing_objects[objectIndex].data_chart});//.appendTo($('#rootPrintContainer')); 
									newChartContainer.css("position","absolute");
									newChartContainer.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newChartContainer.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newChartContainer.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newChartContainer.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newChartContainer.css("overflow","visible");
									var newChartImgContainer = $('<img></img>').attr({ 'src': App.baseUrl+contentObject.pages[indexKe].drawing_objects[objectIndex].image_url,'id':"img"+contentObject.pages[indexKe].drawing_objects[objectIndex].id}).appendTo(newChartContainer);
									
									newChartContainer.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="sticky-text"){ 
									var newStickyTextObject =  $('<div></div>')
									.attr("id",contentObject.pages[indexKe].drawing_objects[objectIndex].id)
									.attr("object_type",contentObject.pages[indexKe].drawing_objects[objectIndex].object_type)
									.addClass("nic-sticky-edit-element");//.appendTo($('#rootPrintContainer'));
 
									newStickyTextObject.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newStickyTextObject.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newStickyTextObject.css("height",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height));
									newStickyTextObject.css("width",parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width));
									newStickyTextObject.css("background",contentObject.pages[indexKe].drawing_objects[objectIndex].background);
									newStickyTextObject.css("overflow","visible");
									newStickyTextObject.html("<div id='text_content_"+contentObject.pages[indexKe].drawing_objects[objectIndex].id+"' style='overflow:hidden;width:100%;height:100%;'>" + contentObject.pages[indexKe].drawing_objects[objectIndex].content + "</div>");
									$("#"+contentObject.pages[indexKe].drawing_objects[objectIndex].id).css("position", "");
									newStickyTextObject.appendTo(rootContainer);
								}
								if((contentObject.pages[indexKe].drawing_objects[objectIndex]).type=="table"){ 
									var newTableContainer = $('<div></div>').attr({'id':contentObject.pages[indexKe].drawing_objects[objectIndex].id,'class':'table','type':contentObject.pages[indexKe].drawing_objects[objectIndex].type, 'object_type':contentObject.pages[indexKe].drawing_objects[objectIndex].object_type});//.appendTo($('#rootPrintContainer'));
 
									newTableContainer.css("position","absolute");
									newTableContainer.css("left",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posx)));
									newTableContainer.css("top",(parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].posy)));
									newTableContainer.css("height", (parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].height)));
									newTableContainer.css("width", (parseInt(contentObject.pages[indexKe].drawing_objects[objectIndex].width)));
									newTableContainer.css("overflow","visible");
									
									newTableContainer.css("cursor", 'default');
									newTableContainer.css("border", '1px solid rgb(160, 160, 164)'); 
									
									var tableConteiner = $('<table></table>').attr({ id: "tbl_"+contentObject.pages[indexKe].drawing_objects[objectIndex].id, border:"2px", width:"100%", height:"100%"}).html(contentObject.pages[indexKe].drawing_objects[objectIndex].content_table).appendTo(newTableContainer);
									
									newTableContainer.appendTo(rootContainer);
								} 
							}   
						}  
					}else{  
						// $('.DocView').find($('#img_'+indexKe)).remove();
						// $('.DocViewHide').find($('#img_'+indexKe)).remove();
						 
						var indexTo = 0;
						indexTo = indexKe + 1;
						var viewIndx = i - 2;   
						
						var alreadyIndex = false;
						var checkIdx = -1;
						for(var indexLast = 0;App.lastIdx.length;indexLast++){
							if(App.lastIdx[indexLast] == indexTo){
								checkIdx = indexLast;
								alreadyIndex = true;
								break;
							}
						}
						
						if(alreadyIndex){ 
							$('.DocViewHide').find($('#rootContainer-'+App.lastIdx[checkIdx])).remove();
							App.lastIdx.splice(checkIdx,1); 
							$('.DocView').find($('#rootContainer-'+indexTo)).css("display","none"); 
							$('.imagePreview').css("display","none"); 
							$('.DocViewHide').find($('#rootContainer-'+App.lastIdx[App.lastIdx.length-1])).css("display","block");
						} 
					}
					App.printObject = 0;
				}
				// App.printObject = 0;
			});
				trSize = trSize + 1; 
			}
		}
	
	}
});